<template>
  <div class="app-container">
    <div class="app-container-inner">
      <div v-if="userStore.userInfo.outlook >= '3'">
        <h3 style="margin-left: 0%">入党进度: 60%, 当前身份: 发展对象</h3>
        <div class="demo-progress">
          <span class="demonstration">进度条</span>
          <el-progress :percentage="60" :stroke-width="15" striped />
        </div>
        <el-steps :active="3" align-center class="step">
          <el-step description="递交入党申请书">
            <template v-slot:title>
              <el-image style="width: 50px; height: 50px" :src="applicationUrl" />
            </template>
          </el-step>
          <el-step description="积极分子">
            <template v-slot:title>
              <el-image style="width: 50px; height: 50px" :src="activistsUrl" />
            </template>
          </el-step>
          <el-step description="发展对象">
            <template v-slot:title>
              <el-image style="width: 50px; height: 50px" :src="developerUrl" />
            </template>
          </el-step>
          <el-step description="预备党员接受">
            <template v-slot:title>
              <el-image style="width: 50px; height: 50px" :src="acceptUrl" />
            </template>
          </el-step>
          <el-step description="预备党员考察">
            <template v-slot:title>
              <el-image style="width: 50px; height: 50px" :src="investigationUrl" />
            </template>
          </el-step>
        </el-steps>
        <el-table :data="tableData" border style="width: 87%" fit class="table">
          <el-table-column prop="list" label="任务列表" width="200" align="center" />
          <el-table-column prop="status" label="状态" width="200" align="center" />
          <el-table-column prop="name" label="办理人" width="200" align="center" />
          <el-table-column prop="disposeTime" label="办理时间" align="center" />
          <el-table-column fixed="right" label="操作" width="220" align="center">
            <template #default="scoped">
              <el-button link type="primary" size="small" @click="getGuide(scoped.row.list)"
                >指引文件下载</el-button
              >
              <el-button
                v-if="judgeShow(scoped.$index)"
                link
                type="primary"
                size="small"
                @click="fileVisible = true"
                >上传审核文件</el-button
              >
              <el-button
                v-if="judgeShow(scoped.$index)"
                link
                type="primary"
                size="small"
                @click="sendContent(scoped.$index)"
                >发送信息至支部</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-dialog v-model="Visible" title="发送消息给支部老师" width="80%">
          <Wangeditor v-model="editorContent" style="margin-bottom: 2%"></Wangeditor>
          <el-button type="primary" @click="send">发送</el-button>
          <el-button @click="Visible = false">取消</el-button>
        </el-dialog>
        <el-dialog v-model="fileVisible" title="审核文件上传" width="30%" align-center>
          <span>上传的文件是必要的</span>
          <el-upload
            v-model:file-list="fileList"
            show-file-list="false"
            class="upload-demo"
            action="https://su75ks.laf.run/uploadFile"
            :data="{ _id: userStore._id }"
            :auto-upload="true"
            :on-success="handleSuccess"
            :limit="1"
          >
            <el-button type="primary" size="large">上传文件</el-button>
          </el-upload>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="fileVisible = false">取消</el-button>
              <el-button type="primary" @click="fileVisible = false"> 确定 </el-button>
            </span>
          </template>
        </el-dialog>
      </div>
      <div v-else>
        <Error></Error>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { Cloud } from 'laf-client-sdk'
  import type { UploadProps, UploadUserFile } from 'element-plus'
  import { ElMessage } from 'element-plus'
  import Wangeditor from '../../../components/WangEdior/index.vue'
  import { useUserStore } from '../../../store/modules/user'
  import { getSettingList } from '@/lafSdkCollection/getSetting'
  import { getPeriodList } from '@/lafSdkCollection/getPeriodInfo'
  import { getSpecialApply } from '@/lafSdkCollection/getApplyInfo'
  import Error from '@/views/error/403.vue'
  import { getAccountInfo } from '@/lafSdkCollection/getAccountInfo'
  const userStore = useUserStore()
  const APPID = 'su75ks' // Laf 应用 appid
  const cloud = new Cloud({
    baseUrl: `https://${APPID}.laf.run`,
    getAccessToken: () => userStore.token,
  })
  const applicationUrl = 'https://oss.laf.run/su75ks-account-create/static/application.png'
  const activistsUrl = 'https://oss.laf.run/su75ks-account-create/static/activists.png'
  const developerUrl = 'https://oss.laf.run/su75ks-account-create/static/developer.png'
  const acceptUrl = 'https://oss.laf.run/su75ks-account-create/static/accept.png'
  const investigationUrl = 'https://oss.laf.run/su75ks-account-create/static/investigation.png'
  const settingPeriod = ref()
  const getSetting = async () => {
    const { period } = await getSettingList()
    settingPeriod.value = period
    tableData.value[0].list = period[9]
    tableData.value[1].list = period[10]
    tableData.value[2].list = period[11]
    tableData.value[3].list = period[12]
    tableData.value[4].list = period[13]
    tableData.value[5].list = period[14]
  }
  const getStatus = (str) => {
    if (str == '2') {
      return '已完成'
    }
  }
  const getPeriod = async () => {
    const phase = await getPeriodList(userStore._id)
    let len = phase.length
    if (len > 14) {
      len = 14
    }
    for (let i = 8; i < len; i++) {
      tableData.value[i - 8].status = getStatus(phase[i].finish)
      let baseTime = phase[i].disposeTime
      let d = new Date(baseTime)
      let batchDate = d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日'
      tableData.value[i - 8].disposeTime = batchDate
      tableData.value[i - 8].name = phase[i].name
    }
  }

  const getInfo = async () => {
    const res = await getAccountInfo(userStore.email)
    userStore.userInfo = res.data.info
    userStore._id = res.data._id
    userStore.name = res.data.name
    userStore.num = res.data.num
    userStore.phone = res.data.phone
    const branch = await cloud.invoke('personGetBranch')
    userStore.branch_name = branch.branch_name
    userStore.admin = branch.admin
  }

  onMounted(() => {
    getInfo()
    getSetting()
    getPeriod()
  })
  const tableData = ref([
    {
      list: '',
      status: '未完成',
      name: '',
      disposeTime: '',
    },
    {
      list: '',
      status: '未完成',
      name: '',
      disposeTime: '',
    },
    {
      list: '',
      status: '未完成',
      name: '',
      disposeTime: '',
    },
    {
      list: '',
      status: '未完成',
      name: '',
      disposeTime: '',
    },
    {
      list: '',
      status: '未完成',
      name: '',
      disposeTime: '',
    },
    {
      list: '',
      status: '未完成',
      name: '',
      disposeTime: '',
    },
  ])
  const judgeShow = (index) => {
    if (index == 0 && tableData.value[index].status == '未完成') {
      return true
    }
    if (tableData.value[index].status == '已完成') {
      return false
    }
    if (
      tableData.value[index].status == '未完成' &&
      tableData.value[index - 1].status == '已完成'
    ) {
      return true
    }
  }
  const p = ref('')
  const Visible = ref(false)
  const fileVisible = ref(false)
  const fileList = ref<UploadUserFile[]>([])
  const editorContent = ref('') //富文本编辑器内容，就是一段html代码
  const handleSuccess: UploadProps['onSuccess'] = async (file, uploadFiles) => {
    await cloud.invoke('createRecord')
    ElMessage('上传成功')
  }
  const getGuide = async (period) => {
    const fileUrl = await cloud.invoke('getStandGuide', { period })
    const link = document.createElement('a')
    link.href = fileUrl
    const fileName = period + '指导文件.docx'
    link.download = fileName // 替换为你要保存的文件名
    link.target = '_blank'
    link.rel = 'noopener noreferrer'
    link.click()
  }
  const sendContent = async (index) => {
    const res = await getSpecialApply(userStore._id, String(index + 9))
    if (res.data.length == 0) {
      ElMessage('请向上传文件再发送信息')
      return
    }
    Visible.value = true
    p.value = String(index + 9)
  }

  const send = async () => {
    const data = {
      period: p.value,
      content: editorContent.value,
      person_id: userStore._id,
    }
    const res = await cloud.invoke('sendApproval', data)
    if (res.code == 200) {
      ElMessage(res.message)
      Visible.value = false
    } else if (res.code == 404) {
      ElMessage(res.error)
    }
  }
</script>
<style scoped lang="scss">
  .demonstration {
    font-size: larger;
    color: rgb(90, 122, 181);
    margin-right: 2%;
  }
  .demo-progress {
    display: flex;
    flex-direction: row;
  }
  .demo-progress .el-progress--line {
    margin-bottom: 5px;
    width: 350px;
  }
  .table {
    margin-top: 3%;
    margin-left: 5%;
  }
  .step {
    margin-top: 3%;
  }
</style>
